function Enlarge(select){
    this.ele = document.querySelector(select)
    //展示图片盒子
    this.show = document.querySelector('.pic')
    //列表盒子
    this.list = document.querySelector('.list > ul')
    //遮罩层盒子
    this.mask = document.querySelector('.cursor')
    //放大显示的盒子
    this.enlarge = document.querySelector('.enlarge')

    //获取show盒子尺寸
    this.show_width = this.show.offsetWidth
    this.show_height = this.show.offsetHeight

    //获取enlarge盒子尺寸
    this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width)
    this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height)

    //获取背景图尺寸
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])

    this.init()
}

//启动器
Enlarge.prototype.init = function () {

    // this.setScale()
    this.overOut()
    this.event()
    this.move()
}

//调整比例
// Enlarge.prototype.setScale = function () {

// // 1. 计算出 mask 的 尺寸
//     this.mask_width = this.enlarge_width * this.show_width / this.bg_width
//     this.mask_height = this.enlarge_height * this.show_height / this.bg_height

// // 2. 给 this.mask 盒子赋值
//     this.mask.style.width = this.mask_width + 'px'
//     this.mask.style.height = this.mask_height + 'px'

// }

//移入显示.移出消失
Enlarge.prototype.overOut = function () {
    // 绑定移入事件
    this.show.addEventListener('mouseenter', () => {
    this.mask.style.display = 'block'
    this.enlarge.style.display = 'block'
    })

    // 绑定移出事件
    this.show.addEventListener('mouseleave', () => {
    this.mask.style.display = 'none'
    this.enlarge.style.display = 'none'
    })
}


//点击切换
Enlarge.prototype.event = function () {
    // 1. 事件委托给 this.list 绑定点击事件
    // 什么是事件对象 : 当事件触发的时候, 一个描述本次事件的一些相关信息的 对象数据类型
    // 什么是事件目标 : 准确触发事件的元素
    // 什么是事件源 : 绑定在谁身上的事件
    this.list.addEventListener('click', e => {
      // 处理事件对象兼容
    e = e || window.event
      // 处理事件目标兼容
    const target = e.target || e.srcElement

      // 条件判断事件目标
    if (target.tagName === 'IMG') {
        // 2. 拿到自定义属性
        const showUrl = target.dataset.show
        const enlargeUrl = target.dataset.enlarge

        // 3. 开始赋值
        this.show.firstElementChild.src = showUrl
        this.enlarge.style.backgroundImage = `url(${ enlargeUrl })`

        // 4. 切换 active 类名
        // 4-1. 给 this.list 内所有的子元素去掉类名
        for (let i = 0; i < this.list.children.length; i++) {
    this.list.children[i].classList.remove('active')
        }
        // 4-2. 给 p 标签加上 active 类名
        target.parentNode.classList.add('active')
    }
    })
    }

//移动联动
Enlarge.prototype.move = function () {

    // 1. 给 this.show 绑定鼠标移动事件
    this.show.addEventListener('mousemove', e => {
      // 处理事件对象兼容
    e = e || window.event

    // console.log('坐标',this.ele.offsetLeft);
    // 2. 获取光标的坐标点
    // 方案1:
    let x = e.pageX - this.ele.offsetLeft - this.ele.clientLeft - 240
    let y = e.pageY - this.ele.offsetTop - this.ele.clientTop - 200 / 2

    // console.log('x',x);
    // console.log('e.pageX',e.pageX);
    // console.log('this.ele.offsetLeft',this.ele.offsetLeft);
    // console.log('this.ele.clientLeft',this.ele.clientLeft);
    // console.log('this.mask_width',this.mask_width);
    // 方案2:
    // let x = e.offsetX - this.mask_width / 2
    // let y = e.offsetY - this.mask_height / 2

    // 3. 边界值判断
    if (x <= 0) x = 0
    if (y <= 0) y = 0
    if (x >= 300) x = 500 - 200
    if (y >= 300) y = 500 - 200

    // 4. 给 mask 的 left 和 top 进行赋值
    this.mask.style.left = x + 'px'
    this.mask.style.top = y + 'px'

    // 5. 让背景图联动
    // 计算出数字
    // 比例: 背景图的尺寸 / 图片盒子的尺寸(show盒子的尺寸) * mask 盒子移动的距离
    const bg_x = this.bg_width / 500 * x
    const bg_y = this.bg_height / 500 * y

    // console.log(bg_x);
    // console.log(y);
    // console.log(bg_y);
    // console.log('背景图尺寸',this.bg_height);
    // console.log('盒子尺寸',this.show_height);
    // 给 enlarge 盒子的 backgroundPosition 设置值
    this.enlarge.style.backgroundPosition = `-${ bg_x }px -${ bg_y }px`
})
}
